<template>
  <div class="allcoresource">
    <div class="allcor-cont" v-for="item in data" :key="item.id">
      <div class="cont-top">
        <el-checkbox :label="item.name" size="large" />
      </div>
      <div class="cont-bot">
        <el-checkbox v-for="item in dataRole" label="Option 1" size="large" />
      </div>
    </div>
    <div class="btn" style="width: 200px; height: 50px; margin: auto">
      <el-button type="primary">保存</el-button>
      <el-button>清空</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as api from "../../request/api";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
let Roleid: any = useRoute().query;
console.log(Roleid);

let data: any = reactive([
  {
    categoryId: 1,
    name: "商品模块",
    id: "0",
    children: [],
  },
  {
    categoryId: 2,
    name: "订单模块",
    id: "0",
    children: [],
  },
  {
    categoryId: 3,
    name: "营销模块",
    id: "0",
    children: [],
  },
  {
    categoryId: 4,
    name: "权限模块",
    id: "0",
    children: [],
  },
  {
    categoryId: 5,
    name: "内容模块",
    id: "0",
    children: [],
  },
  {
    categoryId: 6,
    name: "其他模块",
    id: "0",
    children: [],
  },
]);

const dataRole: any = reactive([]);

const allMenuS = async () => {
  const res = await api.admin.getresources();
  Array(res).filter((item) => {
    // console.log(item);
    data.forEach((val: any) => {
      // console.log(val);
      if (item.categoryId == data.categoryId) {
        val.children.push(item);
        console.log(val.children);
      }
    });
  });
  return res;
};
allMenuS();

const allrole = async () => {
  const res = await api.admin.getresourcesRole(Roleid.id);
  return res;
};
allrole();
</script>

<style lang="scss" scoped>
.allcoresource {
  width: 100%;
  height: 100vh;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding: 10px;

  .allcor-cont {
    width: 100%;

    .cont-top {
      display: flex;
      align-items: center;
      padding: 10px;
      background-color: #fff;
      margin: 10px;
    }

    .cont-bot {
      display: flex;
      align-items: center;
      padding: 10px;
      margin: 10px;
      flex-wrap: wrap;

      .el-checkbox {
        width: 30%;
      }
    }
  }
}
</style>
